<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
        <script type="text/javascript" src="lib/stats.js"></script>
    </head>
    <body style="margin:0px;background-color:#20242B;">
        <canvas width="1200" height="640" id="main"></canvas>
        <div id="time" style="position:absolute;left:10px;top:10px;color:white;"></div>
        <script type="text/javascript">
            var Shader = clay.Shader;
            var Material = clay.Material;
            var Mesh = clay.Mesh;
            var Cube = clay.geometry.Cube;
            var meshUtil = clay.util.mesh;
            var shaderLibrary = clay.shader.library;
            var timeline =  new clay.Timeline;
            timeline.start();

            var renderer = new clay.Renderer({
                canvas: document.getElementById('main'),
                devicePixelRatio: 1.0
            });
            renderer.resize(window.innerWidth, window.innerHeight);
            var scene = new clay.Scene;
            var camera = new clay.camera.Perspective({
                aspect: renderer.getViewportAspect(),
                far: 500
            });

            var cube = new Cube();
            cube.generateTangents();
            var shader = shaderLibrary.get('clay.standard');
            var material = new Material({
                shader: shader
            });
            material.set('glossiness', 0.4);
            var diffuse = new clay.Texture2D;
            diffuse.load("assets/textures/crate.gif");
            var normal = new clay.Texture2D;
            normal.load("assets/textures/normal_map.jpg");
            material.set('diffuseMap', diffuse);
            material.set('normalMap', normal);
            material.enableTexture('diffuseMap');
            material.enableTexture('normalMap');

            var root = new clay.Node({
                name: 'ROOT'
            });
            scene.add(root);
            for( var i = 0; i < 20; i++){
                for(var j = 0; j < 10; j++){
                    for( var k = 0; k < 50; k++){
                        var mesh = new clay.Mesh({
                            geometry: cube,
                            material: material
                        });
                        mesh.position.set(50-Math.random()*100, 50-Math.random()*100, 50-Math.random()*100);
                        root.add(mesh);
                    }
                }
            }
            var light = new clay.light.Point({
                range: 200
            });
            scene.add(light);
            scene.add(new clay.light.Ambient({
                intensity: 0.4
            }))

            camera.position.set(0, 0, 10);

            timeline.on('frame', function(deltaTime) {
                var start = new Date().getTime();
                renderer.render(scene, camera);
                var renderTime = new Date().getTime() - start;
                document.getElementById('time').innerHTML =
                        Math.round(1000 / deltaTime) + '<br />'
                        + renderTime + '<br />';
                root.rotation.rotateY(Math.PI/500);

                stats.update();
            });

            var stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.right = '0px';
            document.body.appendChild(stats.domElement);
        </script>
    </body>
</html>